<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作 （四种方式10个属性） 
		1.控制字体：font-family、font-size、font-weight
		2.控制文本布局：text-aglin、line-height、letter-spacing、word-spacing
		3.文本修饰效果：text-decoration、text-shadow
		4.处理文本效果：white-space
		-->
		<style>
			/* css3语法：选择器 {
				        属性：  属性值；
						属性：  属性值；
						.....
			            }
						叫法：一个样式
			*/
		   body div#d1{ /* 通过加权方式，锁定元素  权值：102*/
			   color: #ffff00;
			   /* 知识点1:文本格式化属性控制字体 
			   font-family:字体家族，指定字体形式
			   */
			   font-family: 华文彩云,sans-serif;
			   /* 设置多个字体：浏览器会按照顺序寻找可用字体
				用户体验，用户系统有什么字体，邮箱指定字体
				通常与统配选择器使用    *{}
				*/
			   /*知识点2：文本格式化属性控制字体
			   font-size：字体大小属性，与单位共存
			   单位  px 像素   使用特点：绝对值、pc端
			         em  相对单位，理解：倍数
					              使用特点：相对与元素按照倍数方式、移动端
			   */
			  /* 知识点3：文本格式化属性控制字体
			    font-weight：字体粗细属性，不存在单位
				属性值：数值【100 200 300 ... 900】
				          常用数值：400
				        单词【400==normal、bold、light】		
					使用方法：统配选择器搭配使用：指定全局字体正常字体粗细
			   */
			  text-transform: uppercase;
			   text-transform: capitalize;
			   text-indent: 200px; 
			  font-weight: 900;
			  font-size: 2em;
			  /*补充：1.英文大写；2.首字母大写 ；3.段落开始间距200px */
			  
		   }
		   div#d1{/* 通过加权方式，锁定元素   权值：101*/
			   color: #55aa00;
			   /* 知识点4：文本格式化属性控制文本格式 
			    text-align  文本对齐属性
				left|right|center|justify：两端对齐
			   */
			  text-align: justify;
			  /* 
			  知识点5：文本格式化属性控制文本格式
			  行高属性 line-height:文本垂直效果
			  使用方式：1高度属性
			           2在高度属性上加行高属性：属性值一致
			  */
			 border: 1px solid red;
			 height: 100px;
			 line-height: 100px;
			 /* 补充：文本对齐和行高属于对齐|间隙：字符和单词之间距离*/
			 /* 知识点6：letter-spacing：设置字符之间间隙 
			    知识点7：word-spacing：设置单词之间间隙
			 */
			word-spacing: 10px;
			letter-spacing: 10px;
		   }
		   #d1{/* 权值：100*/		  
			   color: #e4393c;
		   }
	a.c1{ /*权值：11*/
				/* 知识点8：text-decoration 修饰超链接样式
				 使用方法：与通配符一起使用，设置全局页面超链接样式
				 属性值：none|underline|line-through
				 */   
				text-decoration:line-through;
				/* 知识点9：text-shadow 修饰文本阴影
				    属性值：X轴  Y轴 blur模糊距离 color
				 */
				text-shadow: 5px 5px 5px #ffff00;
	}
	p{
		border: 1px solid red;
		/* 知识点10 ：文本换行效果
		 white-space: 文本换行属性
		 属性值： 
		 nowrap 不换行,只显示一行，超出部分隐藏
		 |pre保存空格和回车|normal默认，空格合并，换行隐藏
		 
		 */
		white-space: pre;
		overflow: hidden;
	}
		</style>
	</head>
	<body>
		<!-- 需求：创建div同时指定别名，添加假文【tab】
		           id选择器，通过加权找到div，添加颜色
		 -->
		 <div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, sapiente! Iure consequatur commodi quibusdam, debitis minus eum beatae eveniet vitae animi minima dicta pariatur, et atque. Nemo deserunt facilis nobis.</div>
		 <hr>
		 <h4>文本修饰效果</h4>
		 <!-- 文本修饰相关属性
		  知识点7：text-tedu-decoration属性：设置超链接效果
		  -->
		 <a class="c1 c2" href="http://www.tsgy.edu.cn">实现跳转 【方式：6种】</a>
		 <div style="height: 800px;"></div>
		 <marquee>
			 <h4>处理文本效果</h4>
		 </marquee>
		 <p>Lorem
		  ipsum dolor sit amet consectetur adipisicing elit.
		     Vitae laudantium dolor, cum deserunt dignissimos 
			   excepturi culpa dicta nam, itaque dolorum eaque 
			     ducimus odio accusantium neque quas perspiciatis ex molestiae. Doloremque.</p>
	</body>
</html>